//轮播图
class Banner {
    constructor() {
        this.index = 0;
        $('.banner li').css({
            backgroundImage: `url(./banner/focus${this.index}.png)`,
        });
        $('.circle li')[this.index].style.backgroundColor = 'gray';
        this.eventBind();
        this.time = null;
        this.setTime();
    }
    setBgcImg() {
        $('.banner li').css({
            backgroundImage: `url(./banner/focus${this.index}.png)`,
        });

    }
    setLiBgColor() {
        for (let i = 0; i < $('.circle li').length; i++) {
            if (this.index == i) {
                $($('.circle li')[i]).css({ backgroundColor: 'gray' });
            } else {
                $($('.circle li')[i]).css({ backgroundColor: 'black' });

            }
        }
    }
    next() {
        this.index++;
        if (this.index == $('.circle li').length) {
            this.index = 0;
        }
        this.setBgcImg();
        this.setLiBgColor();
    }
    prev() {
        this.index--;
        if (this.index == -1) {
            this.index = $('.circle li').length - 1;
        }
        this.setBgcImg();
        this.setLiBgColor();
    }

    setTime() {
        let that = this;
        that.time = setInterval(function () {
            that.index++;
            if (that.index == $('.circle li').length) {
                that.index = 0;
            }
            that.setBgcImg();
            that.setLiBgColor();
        }, 2500)
        return that.time;
    }

    stopTime() {
        clearInterval(this.time);
    }

    eventBind() {
        let that = this;
        $('.arrow-l').click(function () {
            // console.log(123);
            that.prev();
        })
        $('.arrow-r').click(function () {
            that.next();
        })

        for (let i = 0; i < $('.circle li').length; i++) {
            $($('.circle li').get(i)).click(function () {
                that.index = i;
                that.setBgcImg();
                that.setLiBgColor();
            })
        }
        $('.banner').mouseover(function () {
            that.stopTime();
        })
        $('.banner').mouseout(function () {
            that.setTime();
        })

    }

}

let banner = new Banner();
